<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
</head>
<body>
    <div id="app">
        <el-button @click="clear">添加生产线</el-button>
        <el-dialog title="订单" :visible.sync="dialogLineFormVisible" @close="closeDialog">
            <el-form :model="currentLine">
                <el-form-item label="生产线名称">
                    <el-input v-model="currentLine.productionName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="生产能力(组/天)">
                    <el-input v-model="currentLine.productionCapacity" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="可生产型号">
                    <el-input v-model="currentLine.principal" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="负责人" :label-width="formLabelWidth">
                    <el-select v-model="currentLine.operator" placeholder="请选择负责人">
                        <el-option v-for="operator in operators" :label="operator" :value="operator"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="产线人数">
                    <el-input v-model="currentLine.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <template>
                        <el-radio v-model="currentLine.state" label="1">正在生产</el-radio>
                        <el-radio v-model="currentLine.state" label="2">未生产</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="currentLine.remark" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>


        <template>
            <el-table
                    ref="multipleTable"
                    :data="productivity"
                    style="width: 100%">
                <el-table-column
                        label="编号"
                        width="50">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="名称"
                        width="150">
                    <template slot-scope="scope">
                        <span style="margin-left: 2px">{{ scope.row.productionName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="产能"
                        width="150">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.productionCapacity }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="负责人"
                        width="100">
                    <template slot-scope="scope">
                        <span style="margin-left: 2px">{{scope.row.operator}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="型号"
                        width="100">
                    <template slot-scope="scope">
                        <span style="margin-left: 2px">{{scope.row.principal}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="人数"
                        width="100">
                    <template slot-scope="scope">
                        <span style="margin-left: 2px">{{ scope.row.num }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态"
                        width="100">
                    <template slot-scope="scope" >
                        <span style="margin-left: 2px" v-if="scope.row.state==1">正在生产</span>
                        <span style="margin-left: 2px" v-if="scope.row.state==2">未生产</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="备注">
                    <template slot-scope="scope">
                        <span  style="margin-left: 10px">{{scope.row.remark}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                productivity:[],
                currentLine:{id:"",productionName:"",productionCapacity:"",principal:"",num:"",state:"",operator:""},
                dialogLineFormVisible:false,
                operators:[],
            }
        },
        methods:{
            loadProductivity(){
                axios.get("/produce/lines")
                .then(res=>{
                    this.productivity=res.data;
                })
            },
            loadOperators(){
                axios.get("/produce/operators")
                    .then(res=>{
                        this.operators=res.data;
                        console.log(this.operators);
                    })
            },
            handleEdit(index, row) {
                this.currentLine=JSON.parse(JSON.stringify(row));
                this.dialogLineFormVisible=true;
            },
            handleDelete(index, row) {
                console.log(row.id);
                if (confirm("你确定删除此生产线信息吗？")){
                    axios.delete("/produce/line?id="+row.id)
                        .then(res=>{
                            if (res.data=="ok"){
                                this.loadProductivity();
                                this.$message("删除成功");
                            }
                        })
                }
            },
            clear:function(){
                this.currentLine={id:"",productionName:"",productionCapacity:"",principal:"",num:"",state:"",operator:""}
                this.dialogLineFormVisible=true;
            },
            add: function () {
                let pro = JSON.parse(JSON.stringify(this.currentLine));
                if (pro.id==""){
                    console.log(pro);
                    axios.post("/produce/line",pro)
                        .then(res=>{
                            if (res.data=="ok"){
                                this.loadProductivity();
                                this.$message("添加成功")
                            }else {

                            }
                        })
                }else{
                    axios.put("/produce/line",pro)
                        .then(res=>{
                            if (res.data=="ok"){
                                this.loadProductivity();
                                this.$message("更新成功")
                            }else {
                                this.$message("该生产线暂无订单业务")
                            }
                        })
                    console.log(pro);
                }
                this.dialogLineFormVisible=false;
                this.currentLine={id:"",productionName:"",productionCapacity:"",principal:"",num:"",state:"",operator:""};
            },
        },
        mounted(){
            this.loadProductivity();
            this.loadOperators();
        }
    })
</script>
</html>